
var c=document.getElementById("myCanvas");
//拿到一个绘图句柄
var ctx=c.getContext("2d");
//绘制一个红色方框
// ctx.fillStyle="#FF0000";
// ctx.fillRect(0,0,150,75);

// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

//绘制一个线条
ctx.moveTo(0,0);
ctx.lineTo(150,75);
ctx.lineTo(200,111);
ctx.stroke();

//绘制一个圆形 arc(x,y,r,start,stop)
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

//写文字
ctx.font="30px Arial";
ctx.fillText("Hello World",200,50);
ctx.strokeText("strokText",100,150);

//绘图
var img=new Image();
img.src=imageUrl;   imageUrl        //使用html 中传递的模板
img.onload=function(){              //图片加载完成
    console.log("load img: ",imageUrl);
    ctx.drawImage(img,150,150,50,50);
}

function allowDrop(ev)
{
    ev.preventDefault();
}
 
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

function Geolocation(){

    var jd=document.getElementById("jd");
    var wd=document.getElementById("wd");
    var ft=document.getElementById("ft");
    if(navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(function(position){
            jd.innerHTML=jd.innerHTML.split(":")[0] + " : " + position.coords.longitude;
            wd.innerHTML=wd.innerHTML.split(":")[0] + " : " + position.coords.latitude;
        },function(error){
                //插入一个和jd\wd 同级的元素 输出错误信息
                var x=document.createElement("errorInfo");
                x.innerHTML="errorInfo";
                ft.insertBefore(x,ft.children[1]);
                switch(error.code) 
                {
                    case error.PERMISSION_DENIED:
                        x.innerHTML="用户拒绝对获取地理位置的请求。"
                        break;
                    case error.POSITION_UNAVAILABLE:
                        x.innerHTML="位置信息是不可用的。"
                        break;
                    case error.TIMEOUT:
                        x.innerHTML="请求用户地理位置超时。"
                        break;
                    case error.UNKNOWN_ERROR:
                        x.innerHTML="未知错误。"
                        break;
                }
            });
    }else{
        x.innerHTML="Geolocation is not supported by this browser.";
    }
}

var myVideo=document.getElementById("video01"); 
function playPause()
{
    if(myVideo.paused)
    {
        myVideo.play();
    }else{
        myVideo.pause();
    }
}

function makeBig()
{
    myVideo.height=300
}

function makeSmall()
{
    myVideo.height=200
}
